<template>
  <div class="follow">
    <TopNav title="我的关注" class="TopNav" />
    <div class="item" v-for="(item,index) in follwoList" :key="index">
      <img v-if="item.head_img" :src="$axios.defaults.baseURL+item.head_img" alt />
      <img v-else src="@/assets/logo.png" alt />
      <div class="news">
        <div class="title">{{item.nickname}}</div>
        <div class="data">{{item.create_date.split('T')[0]}}</div>
      </div>
      <button @click="unfollow(item.id)">取消关注</button>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
export default {
  data() {
    return {
      follwoList: []
    };
  },
  components: {
    TopNav
  },
  mounted() {
    this.loadPage();
  },
  methods: {
    unfollow(id) {
      console.log("点击了取消关注对应的id" + id);
      this.$axios({
        url: "/user_unfollow/" + id,
        method: "GET"
      }).then(res => {
        console.log(res.data);
        this.loadPage();
      });
    },
    loadPage() {
      this.$axios({
        url: "/user_follows",
        method: "GET"
      }).then(res => {
        const { data } = res.data;
        console.log(data);
        this.follwoList = data;
      });
    }
  }
};
</script>

<style lang='less'>
.follow {
  .TopNav {
    margin-bottom: 8.333vw;
  }
  .item {
    position: relative;
    display: flex;
    padding-top: 1.667vw;
    padding-bottom: 5.556vw;
    border-bottom: 1px solid #d8d8d8;
    img {
      width: 10vw;
      height: 10vw;
      border-radius: 50%;
      margin-left: 5.556vw;
    }
    .news {
      margin-left: 5.556vw;
      .title {
        font-size: 4.444vw;
      }
      .data {
        font-size: 3.333vw;
        color: #7d7d7d;
      }
    }
    button {
      position: absolute;
      top: 2.778vw;
      right: 5.556vw;
      border: 0;
      padding: 0.833vw 4.167vw;
      height: 8.333vw;
      font-size: 3.333vw;
      border-radius: 4.167vw;
    }
  }
}
</style>